<%@ page import="com.example.day_day_up.entity.vo.ViewMaterialVO" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
  <%
    String id = request.getParameter("id");
    ViewMaterialVO materialDTO = (ViewMaterialVO) session.getAttribute("material_key" + id);
    request.setAttribute("material", materialDTO);
  %>
  <title>${material.name}</title>

  <style>
    body {
      padding: 0;
      margin: 0;
    }

    .header {
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      height: 40px;
      background-color: cadetblue;
      display: flex;
      align-items: center;
      position: fixed;
    }

    h3 {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .back {
      display: inline-block;
      margin-left: 20px;
    }

    .back a:hover {
      cursor: pointer;
      color: rgb(200, 197, 197);
    }

    .back_img {
      display: inline-block;
      vertical-align: top;
      width: 20px;
      margin-top: 2px;
    }

    .back_text {
      display: inline-block;
      vertical-align: top;
    }

    .comment-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    .left-side {
      position: fixed;
      top: 40px;
      /* header 的高度 */
      left: 0;
      width: 70%;
      height: calc(100vh - 40px);
      /* 减去 header 的高度 */
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-items: center;
      border-right: 2px solid #ccc;
      box-sizing: border-box;
    }

    .right-side {
      position: fixed;
      top: 40px;
      /* header 的高度 */
      right: 0;
      width: 30%;
      height: calc(100vh - 40px);
      /* 减去 header 的高度 */
      overflow-y: auto;
      display: flex;
      flex: 0 0 30%;
      flex-direction: column;
    }

    .comment-space {
      position: relative;
    }

    .comment-header {
      width: 100%;
      padding: 10px 0;
      background-color: #ccc;
    }

    .comment-header span {
      margin-left: 20px;
      font-weight: bold;
    }

    .comment-card {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      border-bottom: 1px solid #ccc;
    }

    .parent-comment {
      display: flex;
      width: 100%;
    }

    .avatar {
      width: 40px;
      border-radius: 30%;
      margin: 15px;
    }

    .comment-card .name {
      font-weight: bold;
      font-size: 12px;
      margin-top: 10px;
      margin-bottom: 15px;
      color: coral;
    }

    .comment-card .text {
      word-wrap: break-word;
      padding-right: 24px;
      margin-bottom: 10px;
      font-size: 14px;
      /* 控制文本超出换行 */
    }

    .comment-card .card-bottom {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
    }

    .card-bottom span {
      font-size: 13px;
      margin-right: 15px;
      color: #6c6a6a;
    }

    .reply:hover {
      cursor: pointer;
      color: #0c83ff;
    }

    .like {
      width: 13px;
      margin-right: 4px;
    }

    video {
      width: 100%;
      max-width: 800px;
      height: auto;
      display: block;
      margin: 0 auto;
      border-radius: 1%;
    }

    #pdfFrame {
      width: 100%;
      height: 100%;
      border: none;
    }

    .no-comment {
      width: 100%;
      height: 40px;
      font-size: 12px;
      color: #6c6a6a;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .comment-box {
      margin-left: 70px;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;

      .inner-header {
        display: flex;
        align-items: center;
      }

      .inner-avatar {
        width: 30px;
        border-radius: 30%;
        margin: 10px;
      }
    }

    .comment-box {
      display: none;
    }

    .comment-box textarea {
      width: 100%;
      padding: 5px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }

    .inner-submit {
      display: flex;
      justify-content: space-between;
    }

    .submit-btn {
      padding: 4px 14px;
      font-size: 12px;
      border: none;
      background-color: dodgerblue;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }

    .submit-btn:hover {
      background-color: #4CAF50;
    }

    #commentBox {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 30%;
      background-color: #fff;
      z-index: 999;
      padding-bottom: 10px;
    }

    #commentBox {
      display: flex;
      flex-direction: column;
      border: 1px solid #ccc;
    }

    #commentHeader {
      display: flex;
      margin-right: 20px;
      align-items: center;
    }

    #commentInput {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }

    .submit {
      display: flex;
      justify-content: space-between;
      margin: 0 20px;
    }

    #submitBtn {
      padding: 6px 18px;
      font-size: 14px;
      border: none;
      background-color: dodgerblue;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }

    #submitBtn:hover {
      background-color: #4CAF50;
    }

    .free-card {
      width: 100%;
      height: 120px;
    }
  </style>
</head>

<body>

<div class="header">
  <div class="back">
    <a onclick="backCourse()">
      <img class="back_img" src="../assets/file_imgs/返回.png" alt="返回">
      <span class="back_text">返回课程</span>
    </a>
  </div>
  <h3>资料详情</h3>
</div>

<div class="comment-container">
  <div class="left-side">
    <c:if test="${material.type eq '1'}">
      <video id="video-player" controls>
        <source src=${material.storeName} type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </c:if>
    <c:if test="${material.type eq '2'}">
      <embed src=${material.storeName} type="application/pdf" id="pdfFrame" width="100%" height="100%">
    </c:if>
  </div>
  <div class="right-side">
    <div class="comment-space">
      <div class="comment-header">
        <span>评论区</span>
      </div>
      <div class="comment-card">
        <div class="parent-comment">
          <div style="display: block;">
            <img src="../assets/images/avatar.jpg" class="avatar" alt="头像">
          </div>
          <div>
            <div class="name">
              <span>Tom</span>
            </div>
            <div class="text">
              <span>米格尔出场的那一刻我真的发自内心的笑了。故事临近尾声把所有角色拿出来快速展览的作品一数一大把，像jjxx这种干脆利落地把所有人垫给最终boss的做法真的是闻所未闻。宿傩现在就如同那美克星的大长老，能激发人的全部潜力，也像是每个角色的破壁人，通过他之手完成了一大半角色的人物弧光。这种简单粗暴的塑造角色和推进故事的方法，当真是狼狈得别无分号。宿傩平等地给予了所有人无悔的死亡，而且还不补刀，活了又死，死了又生，如生如死，如死如生。</span>
            </div>
            <div class="card-bottom">
              <span>2024-04-04 14:13:59</span>
              <img src="../assets/file_imgs/like_shadow.jpg" alt="点赞" class="like">
              <span>0</span>
              <span class="reply">回复</span>
            </div>
          </div>
        </div>
        <div class="comment-box">
          <div class="inner-header">
            <img src="${user_key.avatar}" class="inner-avatar" alt="头像">
            <div>
              <label>
                <textarea class="comment-input" rows="1" cols="36" name="comment"></textarea>
              </label>
            </div>
          </div>
          <div class="inner-submit">
            <div></div>
            <button class="submit-btn" onclick="submitComment()">回复</button>
          </div>
        </div>
      </div>
      <div class="comment-card">
        <div class="parent-comment">
          <div style="display: block;">
            <img src="../assets/images/avatar.jpg" class="avatar" alt="头像">
          </div>
          <div>
            <div class="name">
              <span>Jack</span>
            </div>
            <div class="text">
              <span>测试评论</span>
            </div>
            <div class="card-bottom">
              <span>2024-04-04 14:13:59</span>
              <img src="../assets/file_imgs/like_shadow.jpg" alt="点赞" class="like">
              <span>0</span>
              <span class="reply">回复</span>
            </div>
          </div>
        </div>
        <div class="comment-box">
          <div class="inner-header">
            <img src="${user_key.avatar}" class="inner-avatar" alt="头像">
            <div>
              <label>
                <textarea class="comment-input" rows="1" cols="36" name="comment"></textarea>
              </label>
            </div>
          </div>
          <div class="inner-submit">
            <div></div>
            <button class="submit-btn" onclick="submitComment()">回复</button>
          </div>
        </div>

      </div>

      <div class="no-comment">
        没有更多评论了
      </div>
      <div class="free-card">

      </div>

      <div id="commentBox">
        <div id="commentHeader">
          <div style="display: block;">
            <img src="${user_key.avatar}" class="avatar" alt="头像">
          </div>
          <div>
            <label for="commentInput">
            </label><textarea id="commentInput" rows="1" cols="50" placeholder="在这里输入您的评论..."></textarea>
          </div>
        </div>
        <div class="submit">
          <div></div>
          <button id="submitBtn" onclick="submitComment()">发布</button>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
  const replies = document.querySelectorAll('.reply')
  for (let i = 0; i < replies.length; i++) {
    replies[i].setAttribute('index', i)
  }
  const commentBoxes = document.querySelectorAll('.comment-box')

  for (let i = 0; i < replies.length; i++) {
    replies[i].onclick = function () {
      // 获取回复人信息
      const commentCard = this.closest('.comment-card')
      const replyName = commentCard.querySelector('.name span').innerText

      const index = this.getAttribute('index')
      const comment = commentBoxes[index]
      const computedStyle = window.getComputedStyle(comment)
      const displayValue = computedStyle.getPropertyValue('display')

      commentBoxes.forEach(commentBox => {
        commentBox.style.display = 'none'
      })
      if (displayValue === 'none') {
        comment.style.display = 'flex'
        const commentInput = comment.querySelector('.comment-input')
        commentInput.placeholder = '回复 @' + replyName + '：'
      } else if (displayValue === 'flex') {
        comment.style.display = 'none'
      }
    }
  }

  var likes = document.getElementsByClassName('like')
  for (let i = 0; i < likes.length; i++) {
    likes[i].addEventListener('mouseover', function () {
      this.src = '../assets/file_imgs/like.png'
      this.style.cursor = 'pointer'
    })
    likes[i].addEventListener('mouseout', function () {
      this.src = '../assets/file_imgs/like_shadow.jpg'
    })
  }

  function backCourse() {
    window.location.href = '/day_day_up/course/index.jsp?id=${material.courseId}'
  }

  function submitComment() {
    var text = document.querySelector('textarea').innerText
    // TODO
    console.log(text)
  }
</script>
</body>

</html>
